$(function () {
  // 1从 layui 中获取 form 对象
  var form = layui.form;
  var layer = layui.layer;
  form.verify({
    // 2
    nickname: function (value) {
      if (value.length > 6) {
        return "昵称长度必须在1-6个字符之间!";
      }
    },
  });

  initUserInfo();

  //3 初始化用户的基本信息
  function initUserInfo() {
    $.ajax({
      method: "GET",
      url: "/my/userinfo",
      success: function (res){
          if(res.status !== 0){
              return layer.msg('获取用户信息失败!');
          }
          console.log(res);
        //  4 调用form.val()快速为表单赋值  拿到的res.data数据会赋值到对应的表单项 赋值的表单项通过第一个参数指定formUserInfo
          form.val('formUserInfo', res.data)
      }
    });
  }

// 5  重置表单的数据
$('#btnReset').on('click', function(e){
// 阻止表单的默认的重置行为
e.preventDefault();
// 调用初始化用户的基本信息 重新获取用户信息 填写表单
initUserInfo();
})

// 6.监听表单的提交事件

$('.layui-form').on('click', function(e){
    //6.1 阻止表单的默认提交行为
    e.preventDefault();
    // 6.2发起ajax数据请求

    $.ajax({
        method: 'POST',
        url:'/my/userinfo',
    // 6.3拿到表单填写的数据
        data:$(this).serialize(),
        success: function(res){
            if(res.status !== 0){
                return layer.msg('更新用户信息失败!');
            }
            layer.msg('更新用户信息成功!');
        }
    })
// 6.4更新父页面的用户昵称和头像
// 有用户昵称让父页面显示用户昵称 实现是：让子页面调用父页面的方法 重新传染用户头像和信息
// 父元素在window里 子元素在fm里 中间隔着fm 
window.parent.getUserInfo();

})
});
